<template>
	<view>
		<view class="Lu-class-header">
			<view class="Lu-class-search">
				<view class="Lu-class-Title">分类</view>

				<view class="Lu-class-searchinput"><image src="/static/image/classific/search.png"></image><input type="text"  class="Lu-class-inputdata" @confirm="search()" v-model="searchInput"></view>
			</view>
			<view class="Lu-class-classlist">
				<scroll-view scroll-x="true" class="kite-classify-scroll" style="width: 100%;">
					<view class="kite-classify-cell" v-for="(item,index) in classLists" @click="Getclasscom(item.id)" :key='index' :class="{ 'active':isactive == item.id}">
						趣{{item.name}}
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="Lu-class-body">
			<view class="campus-box">
				<view class="campus-item" v-for="(item,index) in classmercharts" :key="index" @click="navTo(item)">
					<view class="campus-media">
						<image class="campus-logo" :src="apiUrl + item.pic"></image>
					</view>
					<view class="campus-body">
						<view class="campus-title">{{item.name}}</view>
						<view class="campus-desc">主要课程：{{item.describe}}</view>
						<view class="campus-footer">
							<text class="iconfont icon-xsm"></text>{{item.people_num}}名会员加入</text>
						</view>
						<view class="campus-footer">
							<text class="iconfont icon-dingwei"></text>{{item.address}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default{
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl','tabbarid'])
		},
		data(){
			return{
				searchInput:'',  //输入框搜素内容
				isactive:'',
				tabbarids:'',
				classLists:[],
				classmercharts:[],
				
			}
		},
		onLoad:function(option){
			
				
				var _this = this
				if(this.tabbarid == ''){
					uni.request({
						url:this.apiUrl+ 'api/get_column',
						data:{},
						method:'POST',
						header:{
							openid:this.openId
						},
						success: (res) => {
							this.classLists = res.data.data
							this.isactive = res.data.data[0].id
							this.tabbarids = res.data.data[0].id
							console.log(this.tabbarids)
							uni.request({
								url:_this.apiUrl+ 'api/get_search_id',
								data:{
									column_id:_this.tabbarids
								},
								method:'POST',
								header:{
									openid:_this.openId
								},
								success: (res) => {
									_this.classmercharts = res.data.data
								}
							})
						}
					})
					
				}else{
					console.log(2)
					_this.isactive = _this.tabbarid
					uni.request({
						url:_this.apiUrl+ 'api/get_search_id',
						data:{
							column_id:_this.isactive
						},
						method:'POST',
						header:{
							openid:_this.openId
						},
						success: (res) => {
							_this.classmercharts = res.data.data
						}
					})
				}
			
		},
		onShow:function(){
			this.wxgetclassLists()
			if(this.tabbarid == ''){
				
				uni.request({
					url:this.apiUrl+ 'api/get_search_id',
					data:{
						column_id:this.tabbarids
					},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						this.classmercharts = res.data.data
					}
				})
			}else{
				this.isactive = this.tabbarid
				uni.request({
					url:this.apiUrl+ 'api/get_search_id',
					data:{
						column_id:this.tabbarid
					},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						this.classmercharts = res.data.data
					}
				})
			}
			
		},
		
		methods:{
			wxgetclassLists:function(){
				uni.request({
					url:this.apiUrl+ 'api/get_column',
					data:{},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						this.classLists = res.data.data
						this.isactive = res.data.data[0].id
						this.tabbarids = res.data.data[0].id
					}
				})
			},
			Getclasscom:function(index){
				this.isactive = index
				uni.request({
					url:this.apiUrl+ 'api/get_search_id',
					data:{
						column_id:this.isactive
					},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						this.classmercharts = res.data.data
					}
				})
			},
			navTo:function(item) {
				uni.navigateTo({
					url: `/pages/classification/merchant?id=${item.id}`
				})
			},
			search:function(){
				uni.navigateTo({
					url: `/pages/classification/search?content=${this.searchInput}`
				})
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.clearfix:after {  
	    content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;  
	}  
	.Lu-class-header{
		height: 300rpx;
		background-image: url('~@/static/image/classific/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 300rpx;
		.Lu-class-search{
			text-align: center;
			// position: relative;
			padding-top: 70rpx;
		}
		.Lu-class-searchbtn{
			width: 30rpx;
			height: 30rpx;
		
			image{
				width: 100%;
				height: 100%;
			}
		}
		.Lu-class-searchinput{
			text-align: left;
			height: 60rpx;
			// width: 100%;
			line-height: 60rpx;
			// margin: 40rpx 0 40rpx;
			margin: 0 40rpx;
			margin-top: 30rpx ;
			
			.Lu-class-inputdata{
				background-color: #9b9ec9;
				position: absolute;
				min-height: 60rpx;
				width: 570rpx;
				height: 60rpx;
				line-height: 60rpx;
				padding-left: 100rpx;
				border-radius: 40rpx;
				color: #e9eaf3;
			}
			image{
				width: 30rpx;
				height: 30rpx;
				margin-top: 15rpx;
				margin-left: 40rpx;
				position: absolute;
				z-index: 5;
			}
		}
		.Lu-class-Title{
			font-size: 40rpx;
			color: #fff;
		}
		.Lu-class-classlist{
			margin-top: 30rpx;
			// padding:0 20rpx;
			.kite-classify-scroll{
				.kite-classify-cell{
					
				}
				.active{
					border-bottom: 4rpx solid #fff;
					
				}
			}
		}
	}
	.kite-classify-scroll{
	    width: 100%;
		height: 58rpx;
		overflow: hidden;
	 	white-space: nowrap;
	}
	.kite-classify-cell{
		display: inline-block;
		// width: 20%;
		height: 48rpx;
		line-height: 48rpx;
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #fff;
	}
	
	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}
	
	.campus-item {
		position: relative;
		overflow: hidden;
		border-top: 1px solid #f5f5f5;
		// padding: 12rpx 0;
		margin: 12rpx 0;
	}
	.Lu-class-body{
		padding: 20rpx;
	}
	.campus-media {
		float: left;
	
		.campus-logo {
			width: 280rpx;
			height: 200rpx;
			border-radius: 10rpx 0 0 10rpx;
			vertical-align: middle;
		}
	}
	
	.campus-body {
		margin-left: 280rpx;
		// padding-left: 20rpx;
		background-color: #fff;
		border-radius: 0 10rpx 10rpx 0;
		padding: 10rpx 0;
		vertical-align: middle;
		height: 180rpx;

		.campus-title {
			font-size: 30rpx;
			color: #333;
			padding-top: 2rpx;
			padding-left: 20rpx;
			margin-bottom: 14rpx;
		}
	
		.campus-desc {
			font-size: 24rpx;
			padding-left: 20rpx;
			color: #999;
			margin-bottom: 20rpx;
		}
		.campus-footer {
			font-size: 24rpx;
			color: #aaa;
			// height: 44rpx;
			// line-height: 44rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-left: 20rpx;
		
			.iconfont {
				font-size: 24rpx;
				margin-right: 6rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>
